import React, { Component } from 'react';
import { connect } from 'dva';
import { Checkbox, Alert,Form,Tabs,Row,Col,Input,Icon,Button } from 'antd';
import styles from './Login.less';

const { TabPane } = Tabs;
const FormItem = Form.Item;

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))
@Form.create()
export default class LoginPage extends Component {
  state = {
    type: 'account',
    autoLogin: true,
    count:0,
  };


  onTabChange = type => {
    this.setState({ type });
  };

  // 登录
  handleSubmit = e => {
    e.preventDefault();
    const { type } = this.state;
    const { dispatch,form } = this.props;
    form.validateFields((err, values) => {
      if(type === "account"){
        if(!err || !(err.password && err.userName)){
          dispatch({
            type: 'login/login',
            payload: {
              ...values,
              type,
            },
          });
        }
      }else{
        if(!err || !(err.captcha && err.mobile)){
          dispatch({
            type: 'login/login',
            payload: {
              ...values,
              type,
            },
          });
        }
      }
    })
  };

  // 修改checkBox勾选状态
  changeAutoLogin = e => {
    this.setState({
      autoLogin: e.target.checked,
    });
  };

  // 获取验证码的消息
  onGetCaptcha = () => {
    const { form,dispatch } = this.props;
    const s = /^1\d{10}$/;
    if(!s.test(form.getFieldValue('mobile'))){
      return;
    }
    dispatch({
      type: 'login/getBackMobileVerCode',
      payload: {mobile:form.getFieldValue('mobile')},
    });
    let count = 59;
    this.setState({ count });
    this.interval = setInterval(() => {
      count -= 1;
      this.setState({ count });
      if (count === 0) {
        clearInterval(this.interval);
      }
    }, 1000);
  };


  // 错误信息提示
  renderMessage = content => {
    return <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />;
  };

  render() {
    const { login, submitting,form } = this.props;
    const { type, autoLogin,count } = this.state;
    const { getFieldDecorator } = form;
    return (
      <div className={styles.main}>
        <div className={styles.login}>
          <Form onSubmit={this.handleSubmit}>
            <div>
              <Tabs
                animated={false}
                className={styles.tabs}
                activeKey={type}
                onChange={this.onTabChange}
              >
                <TabPane key="account" tab="账户密码登录">
                  {login.status === 0 &&
                  login.type === 'account' &&
                  login.massage &&
                  !submitting &&
                  this.renderMessage(login.massage)}
                  <FormItem>
                    {getFieldDecorator('userName', {
                      rules: [{
                        required: true,
                        message: 'Please enter username!',
                      }],
                    })(
                      <Input size="large" prefix={<Icon type="user" className={styles.prefixIcon} />} placeholder="请输入账号" />
                    )}
                  </FormItem>
                  <FormItem>
                    {getFieldDecorator('password', {
                      rules: [{
                        required: true,
                        message: 'Please enter password!',
                      }],
                    })(
                      <Input size="large" prefix={<Icon type="lock" className={styles.prefixIcon} />} type='password' placeholder="请输入密码" />
                    )}
                  </FormItem>
                </TabPane>
                {/*<TabPane key="mobile" tab="手机号登录">*/}
                  {/*{login.status === 0 &&*/}
                  {/*login.type === 'mobile' &&*/}
                  {/*login.massage &&*/}
                  {/*!submitting &&*/}
                  {/*this.renderMessage(login.massage)}*/}
                  {/*<FormItem>*/}
                    {/*{getFieldDecorator('mobile', {*/}
                      {/*rules: [*/}
                        {/*{*/}
                          {/*required: true,*/}
                          {/*message: 'Please enter mobile number!',*/}
                        {/*},*/}
                        {/*{*/}
                          {/*pattern: /^1\d{10}$/,*/}
                          {/*message: 'Wrong mobile number format!',*/}
                        {/*},*/}
                      {/*],*/}
                    {/*})(*/}
                      {/*<Input size="large" prefix={<Icon type="mobile" className={styles.prefixIcon} />} placeholder="mobile number" />*/}
                    {/*)}*/}
                  {/*</FormItem>*/}
                  {/*<FormItem>*/}
                    {/*<Row gutter={8}>*/}
                      {/*<Col span={16}>*/}
                        {/*{getFieldDecorator('captcha', {*/}
                          {/*rules: [{*/}
                            {/*required: true,*/}
                            {/*message: 'Please enter Captcha!',*/}
                          {/*}],*/}
                        {/*})(*/}
                          {/*<Input size="large" prefix={<Icon type="mail" className={styles.prefixIcon} />} placeholder="captcha" />*/}
                        {/*)}*/}
                      {/*</Col>*/}
                      {/*<Col span={8}>*/}
                        {/*<Button*/}
                          {/*disabled={count}*/}
                          {/*className={styles.getCaptcha}*/}
                          {/*size="large"*/}
                          {/*onClick={this.onGetCaptcha}*/}
                        {/*>*/}
                          {/*{count ? `${count} s` : '获取验证码'}*/}
                        {/*</Button>*/}
                      {/*</Col>*/}
                    {/*</Row>*/}
                  {/*</FormItem>*/}
                {/*</TabPane>*/}
              </Tabs>
            </div>
            <div>
              <Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
                自动登录
              </Checkbox>
            </div>
            <Button loading={submitting} className={styles.submit} size="large" type="primary" htmlType="submit">登录</Button>
          </Form>
        </div>
      </div>
    );
  }
}
